<template>
  <div class="">
    <el-container>
      <el-header>
        <div class="webmain"><!--有待完善-->
          <div class="tool-left">
            <h1>药品用法用量查询</h1>
          </div>
            <el-menu
              style="white-space: nowrap;display: flex;margin-right: 60px"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#397299"
              text-color="#fff"
              active-text-color="#ffffff">
              <el-menu-item index="1" @click="$router.push('/webPage.html')"><i class="el-icon-house" style="color: white" />首页</el-menu-item>
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-s-data" style="color: white" />第三方库</template>
                <el-menu-item index="2-3" @click="$router.push('/searchApi.html')"><img src="@/assets/svg/prescription.svg" alt="中药材" class="icon-svg">药品搜索</el-menu-item>
                <el-menu-item index="2-1" @click="$router.push('/apiMedicineInfo.html')"><img src="@/assets/svg/ChineseHerbIcon.svg" alt="中药材" class="icon-svg">中药材</el-menu-item>
                <el-menu-item index="2-3" @click="$router.push('/prescriptionApi.html')"><img src="@/assets/svg/prescription.svg" alt="中药材" class="icon-svg">方剂</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title"><i class="el-icon-copy-document" style="color: white" />药物分类</template>
                <el-menu-item index="2-1" @click="$router.push('/traditionalChineseMedicine')"><img src="@/assets/svg/ChineseHerbIcon.svg" alt="中药材" class="icon-svg">中药材</el-menu-item>
                <el-menu-item index="2-2" @click="$router.push('/chineseMedicines')"><img src="@/assets/svg/zhongcyao.svg" alt="中药材" class="icon-svg">中成药</el-menu-item>
                <el-menu-item index="2-3" @click="$router.push('/westernMedicineTheme')"><img src="@/assets/svg/WestermMedicine.svg" style="width: 19px;height: 19px;padding: 0 5px" alt="中药材" class="icon-svg">西药</el-menu-item>
              </el-submenu>
              <el-menu-item index="4" @click="$router.push('/bodyDiscernmentInfo.html')"><i class="el-icon-s-data" style="color: white" />其他</el-menu-item>
              <el-menu-item index="4" @click="logout2"><i class="el-icon-collection-tag" style="color: white" />后台管理</el-menu-item>
              <el-menu-item index="5" @click="showLoginDialogMethod()"><i class="el-icon-loading" style="color: white;white-space: nowrap;position: relative;overflow: hidden" />登录</el-menu-item>
            </el-menu>
          <div class="my-image">
<!--            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>-->
<!--            <el-avatar v-if="isShowImage" :src="image_url" ></el-avatar>-->
            <el-popover
              placement="top-start"
              width="200"
              trigger="click"
            >
              <el-descriptions title="个人信息">
                <el-descriptions-item label="账户">{{myInfo.username}}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions>
                <el-descriptions-item label="手机号">{{ myInfo.phone }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions>
                <el-descriptions-item label="邮箱">{{ myInfo.email }}</el-descriptions-item>
              </el-descriptions>
<!--              <el-button slot="reference">hover 激活</el-button>-->
              <el-avatar slot="reference" v-if="isShowImage" :src="myInfo.imageUrl" ></el-avatar>
            </el-popover>
          </div>
        </div>
      </el-header>
      <div style="">
        <el-drawer
          :visible.sync="showLoginDialog"
          :with-header="false"
          :size="size"
          custom-class="custom-drawer"
        >
          <div class="centered-login-form" >
            <div style="margin-right: 30%" @keydown.enter="login">
              <el-form ref="loginForm" :model="loginForm" :rules="rules"  label-width="40px" class="demo-ruleForm">
                <el-form-item label="" prop="username">
                  <el-input v-model="loginForm.username" placeholder="请输入用户名">
                    <i class="el-icon-user" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                  <el-input type="password" v-model="loginForm.password" placeholder="请输入密码">
                    <i class="el-icon-lock" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <div class="check-code-panel">
                  <el-form-item label="" prop="verificationCode" style="position: relative;">
                    <el-input type="verificationCode" v-model="loginForm.verificationCode" placeholder="code">
                      <i class="el-icon-position" slot="prefix" style="color: black;"></i>
                    </el-input>
                    <img id="captchaImage" :src="captchaImageMethodRequest()" @click="refreshCaptcha" style="width: 88px; height: 38px; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); cursor: pointer;">
                  </el-form-item>
                </div>
                <el-button type="button" style="margin: 1px 12px 11px 196px;white-space: nowrap;vertical-align: middle" @click="showRegisterDialog = true; showLoginDialog = false;">前往注册</el-button>
                <el-form-item>
                  <el-button :loading="loading" type="primary" style="width: 260px;" @click="login">登录</el-button>
                </el-form-item>
              </el-form>
              <el-button type="button" style="margin: 1px 12px 11px 196px;white-space: nowrap;vertical-align: middle" @click="forgotPasswordDialog = true; showLoginDialog = false;">忘记密码</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
      <div style="">
        <el-drawer
          :visible.sync="showRegisterDialog"
          background-color="#f0f0f0"
          :size = "size"
          :with-header="false"
          :before-close="handleClose"
        >
          <div class="centered-login-form">
            <div style="margin-right: 30%" @keydown.enter="register">
              <el-form ref="loginForm" :model="loginForm" :rules="rules"  label-width="40px" class="demo-ruleForm">
                <el-form-item label="" prop="name">
                  <el-input v-model="loginForm.name" class="custom-input" placeholder="请输入姓名">
                    <i class="el-icon-c-scale-to-original" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="username">
                  <el-input v-model="loginForm.username" placeholder="请输入账号">
                    <i class="el-icon-user" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                  <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" show-password autocomplete="off">
                    <i class="el-icon-lock" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="resPassword">
                  <el-input type="password" v-model="loginForm.resPassword" placeholder="请再次输入密码" autocomplete="off">
                    <i class="el-icon-lock" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <div class="check-code-panel">
                  <el-form-item label="" prop="verificationCode" style="position: relative;">
                    <el-input type="verificationCode" v-model="loginForm.verificationCode" placeholder="code">
                      <i class="el-icon-position" slot="prefix" style="color: black;"></i>
                    </el-input>
                    <img id="captchaImage2" :src="captchaImageMethodRequest()" @click="refreshCaptcha" style="width: 88px; height: 38px; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); cursor: pointer;">
                  </el-form-item>
                </div>
                <el-button type="button" style="margin: 1px 12px 11px 224px;white-space: nowrap;vertical-align: middle" @click="handleLoginClick">登录</el-button>
                <el-form-item>
                  <el-button type="primary" style="width: 260px;" @click="register">注册</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-drawer>
      </div>
      <div style="">
        <el-drawer
          :visible.sync="forgotPasswordDialog"
          background-color="#f0f0f0"
          :size = "size"
          :with-header="false"
          :before-close="handleClose"
        >
          <div class="centered-login-form">
            <div style="margin-right: 30%" @keydown.enter="forgotPassword">
              <el-form ref="loginForm" :model="loginForm" :rules="rules"  label-width="40px" class="demo-ruleForm">
                <el-form-item label="" prop="username">
                  <el-input v-model="loginForm.username" placeholder="请输入账号">
                    <i class="el-icon-user" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                  <el-input type="password" v-model="loginForm.password" placeholder="请输入新密码" show-password autocomplete="off">
                    <i class="el-icon-lock" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="resPassword">
                  <el-input type="password" v-model="loginForm.resPassword" placeholder="请再次输入新密码" autocomplete="off">
                    <i class="el-icon-lock" slot="prefix" style="color: black"></i>
                  </el-input>
                </el-form-item>
                <div class="check-code-panel">
                  <el-form-item label="" prop="verificationCode" style="position: relative;">
                    <el-input type="verificationCode" v-model="loginForm.verificationCode" placeholder="code">
                      <i class="el-icon-position" slot="prefix" style="color: black;"></i>
                    </el-input>
                    <img id="captchaImage3" :src="captchaImageMethodRequest()" @click="refreshCaptcha" style="width: 88px; height: 38px; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); cursor: pointer;">
                  </el-form-item>
                </div>
                <el-button type="button" style="margin: 1px 12px 11px 224px;white-space: nowrap;vertical-align: middle" @click="handleLoginClick">登录</el-button>
                <el-form-item>
                  <el-button :loading="loading" type="primary" style="width: 260px;" @click="forgotPassword">重置密码</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-drawer>
      </div>
      <el-main>
        <!-- 将 router-view 放在这里，用于显示不同的路由组件 -->
          <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// import frontLogin from '@/views/login/FrontDeskLoginView'
import request from '@/api/request'

export default {
  data () {
    return {
      size: '23%',
      forgotPasswordDialog: false,
      showLoginDialog: false,
      showRegisterDialog: false,
      medicineDetails: null,
      isShowImage: false,
      loginForm: {
        username: '',
        password: '',
        resPassword: '',
        verificationCode: '',
        publicIp: ''
      },
      image_url: '',
      myInfo: [],
      messagelogin: '',
      loading: false,
      captchaImageUrl: '',
      captchaImageApi: '/user/code?',
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        resPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            validator: (rules, value, callback) => {
              if (value !== this.loginForm.password) {
                callback(new Error('输入密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  components: {
    // frontLogin
  },
  created () {
    this.$eventBus.$on('medicineDetails', this.medicineDetail)
    this.captchaImageUrl = this.$requestcode.defaults.baseURL
    this.showMyImage()
  },
  mounted () {
    // request.get('https://api.ipify.org/').then(resp => {
    //   this.loginForm.publicIp = resp.data
    //   // alert(resp.data)
    // })
  },
  methods: {
    showMyImage () {
      const user = JSON.parse(localStorage.getItem('user'))
      // alert(user)
      this.image_url = user.imageUrl
      this.myInfo = user
      this.isShowImage = true
    },
    captchaImageMethodRequest () {
      return this.captchaImageUrl + this.captchaImageApi + '?'
    },
    medicineDetail () {
      this.showLoginDialog = true
    },
    logout2 () {
      const token = localStorage.getItem('token')
      if (token === null) {
        this.$router.push('/login/index.html')
      } else {
        // window.location.href = 'http://localhost:5555/#/backend.html'
        this.$router.push('/backend.html')
      }
    },
    login () {
      const requestData = {
        username: this.loginForm.username,
        password: this.loginForm.password,
        verificationCode: this.loginForm.verificationCode,
        publicIp: this.loginForm.publicIp
      }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          request.post('/client/login', requestData).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: res.data.message,
                type: 'success',
                center: true,
                offset: 100
              })
              this.loading = false
              localStorage.setItem('ordinaryUserToken', res.data.token)
              localStorage.setItem('user', JSON.stringify(res.data.data.user))
              this.$cookies.set('user', res.data.data.user, '25s')
              this.$cookies.set('token', res.data.token, '25s')
              this.showMyImage()
              // this.$router.push('/')
              this.showLoginDialog = false
            } else {
              this.$message({
                message: res.data.message,
                type: 'error',
                center: true,
                offset: 100
              })
              this.messagelogin = res.data.message
              this.loading = false
            }
          }).catch(err => {
            this.handleAxiosError(err)
            this.loading = false
          })
        }
      })
    },
    register () {
      const requestData = {
        name: this.loginForm.name,
        username: this.loginForm.username,
        password: this.loginForm.password,
        verificationCode: this.loginForm.verificationCode
      }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          request.post('/user/register', requestData).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: res.data.message,
                type: 'success',
                center: true,
                offset: 100
              })
              this.showRegisterDialog = false
              this.showLoginDialog = true
              this.loading = false
            } else {
              this.$message({
                message: res.data.message,
                type: 'error',
                center: true,
                offset: 100
              })
              this.loading = false
            }
          }).catch(err => {
            this.handleAxiosError(err)
            this.loading = false
          })
        }
      })
    },
    forgotPassword () {
      const requestData = {
        username: this.loginForm.username,
        password: this.loginForm.password,
        verificationCode: this.loginForm.verificationCode
      }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          request.post('/client/forgotPassword', requestData).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: res.data.message,
                type: 'success',
                center: true,
                offset: 100
              })
              localStorage.clear()
              this.forgotPasswordDialog = false
              this.loginForm = {}
              this.showLoginDialog = true
              this.loading = false
            } else {
              this.$message({
                message: res.data.message,
                type: 'error',
                center: true,
                offset: 100
              })
              this.loading = false
            }
          }).catch(err => {
            this.handleAxiosError(err)
            this.loading = false
          })
        }
      })
    },
    showLoginDialogMethod () {
      this.showLoginDialog = true
      this.captchaImageMethodRequest()
    },
    refreshCaptcha () {
      this.captchaImageApi = '/user/code?' + new Date().getTime()
    },
    handleLoginClick () {
      // 关闭注册弹出框，显示登录弹出框
      this.showRegisterDialog = false
      this.showLoginDialog = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.loginForm = {}
        })
        .catch(_ => {})
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        // this.$message.error('网络请求失败，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      } else {
        // 处理其他类型的错误
        // this.$message.error('网络请求失败，发生错误，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      }
    }
  }
}
</script>
<style>
.html, body, #app{
  height: 100%;
  margin: 0;
  padding: 0;
}
.centered-login-form {
  margin-top: 39%;
  width: 100%;
  padding-right: 10px;
}
.centered-login-form .el-input {
  width: 260px;
  margin-right: 10px;
}
.el-container {
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.el-header {
  background-color: #397299;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.check-code-panel {
  display: flex;
}
.el-main {
  background-color: #fcfcfc;
  color: #333;
  text-align: center;
  /*display: flex;*/
  width: 100%;
  height: auto;
}
.el-footer {
  background-color: #a31616;
}
.tool-left {
  height: 100%;
  align-items: center;
  display: flex;
  white-space: nowrap;
  color: #fcfcfc;
}
.tool-left .el-breadcrumb {
  margin-left: 20px;
}
.webmain {
  display: flex;
  justify-content: space-between;
  height: 60px;
  z-index: 9999;
  box-shadow: rgba(222, 44, 44, 0.1) 0px 0px 10px;
  background-color: #397299;
  transition: transform 0.3s;
  white-space: nowrap;
  /*overflow: auto;*/
}
.main .dropdown {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-right: 5%;
}
.main .welcome-message {
  padding-top: 18px;
  white-space: nowrap;
  margin-left: 190px;
  vertical-align: middle;
}
.main .card {
  display: flex;
  align-items: center;
  padding-right: 12px;
  margin-left: 20px;
}
.main .card span {
  margin-left: 10px;
}
.dropdown-menu {
  /*background-color: #fcfcfc; */
}

.dropdown-menu .el-dropdown-item:hover,
.dropdown-menu .el-button:hover {
  background-color: #82bccd;
}
.linkBox {
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  float: right;
}
.linkBox .el-link {
  margin-right: 25px;
  color: #8c8c8c;
}
.linkBox .el-link:hover {
  color: #30bcd7;
}
.linkBox .el-link span {
  margin-left: 8px;
}

.demo-rich-conent-custom img {
  width: 55px;
  margin: 0px 15px 0px 0px;
  border-radius: 50px;
  float: left;
}

.demo-rich-conent-custom p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-link--inner {
  color: #0a0a0a;
}
.el-link--inner:hover {
  color: #db930c;
}
.custom-drawer {
  background-color: #f0f0f0; /* 设置背景色 */
}
.el-input:hover, .el-input:focus {
  border-color: #4f66de;
  box-shadow: 0 0 10px rgba(213, 28, 154, 0.5);
}
.el-form-item label {
  white-space: nowrap;
}
#captchaImage,
#captchaImage2 {
  cursor: pointer;
}
.el-drawer__body {
  flex: 1;
  overflow: auto;
  background: linear-gradient(to bottom, #2477d5, #eeeded 50%);
}
.icon-svg {
  width: 19px;
  height: 19px;
  padding: 0 7px 4px 4px;
}
.my-image {
  width: 40px;
  height: 40px;
  display: flex;
  padding-inline: 12px;
  /* white-space: nowrap; */
  line-height: 40px;
  padding: 8px 12px 2px 32px;
}
</style>
